<template>
  <view class="main">
    <view class="search">
      <image class="search_icon" src="https://img.qumoyugo.com/img/home_nearby_search_icon.png" mode="aspectFill"/>
      <input type="text" v-model="data.query.orderNo" placeholder="请输入搜索内容" class="search-text" maxlength="30"/>
      <button class="search-btn" @click="data.search">搜索</button>
    </view>

    <view v-for="(item,idx) in data.list" :key="idx">
      <view class="item" @click="click('/user/order/toiletryDetail?isRefundOrder=true&refundOrderId='+item.refundOrderId+'&refundStatus='+item.refundStatus+'&orderId='+item.id)" v-if="item.orderType===1">
        <view class="item_top">
          <view class="item_title">
            {{ item.orderNo }}
            <span class="order_status"> {{ data.getRefundStatus(item) }} </span>
          </view>
          <view class="item_main">
            <view>
              <image class="main_img" :src="item.url" mode="aspectFill"/>
            </view>
            <view>
              <view class="item_main_title"> {{ item.name }} </view>
              <view class="item_main_time">预约时间：<span> {{ item.startTime }}  - {{ item.endTime }}</span></view>
              <view class="item_main_time time_2">下单时间：<span>{{ item.createdTime }}</span></view>
            </view>
          </view>
        </view>
        <view class="item_bottom">
          <view>
            订单金额
            <span class="item_price_num">¥  {{ item.orderMoney }} </span>
          </view>
        </view>
      </view>
      <view class="item" @click="click('/user/order/eventsDetail?isRefundOrder=true&refundOrderId='+item.refundOrderId+'&refundStatus='+item.refundStatus+'&orderId='+item.id)" v-if="item.orderType===0">
        <view class="item_top">
          <view class="item_title">
            {{ item.orderNo }}
            <span class="order_status">{{ data.getRefundStatus(item) }} </span>
          </view>
          <view class="item_main_no">
            <view>
              <view class="item_main_title event_title"> {{ item.name }} </view>
              <view class="item_main_time">备注：<span>{{ item.remark }}</span></view>
              <view class="item_main_time time_2">下单时间：<span>{{ item.createdTime }}</span></view>
            </view>
          </view>
        </view>
        <view class="item_bottom">
          <view>
            订单金额
            <span class="item_price_num">¥  {{ item.orderMoney }} </span>
          </view>
        </view>
      </view>
      <view class="item" @click="click('/user/order/consignDetail?isRefundOrder=true&refundOrderId='+item.refundOrderId+'&refundStatus='+item.refundStatus+'&orderId='+item.id)" v-if="item.orderType===2">
        <view class="item_top">
          <view class="item_title">
            {{ item.orderNo }}
            <span class="order_status">{{ data.getRefundStatus(item) }}</span>
          </view>
          <view class="item_main_no">
            <view class="consign_address" v-if="item.fromCity && item.toCity">
              <span class="address_txt">{{ item.fromCity }}</span>
              <image class="arrows2_icon" src="https://img.qumoyugo.com/img/nurse_order_serve_change_arrows2_icon.png" mode="aspectFill"/>
              <span class="address_txt">{{ item.toCity }}</span>
            </view>
            <view class="item_main_time">托运时间：<span>{{ item.consignTime }}</span></view>
            <view class="item_main_time time_2">托运类型：<span>{{ data.getConsingType(item) }}</span></view>
          </view>
        </view>
        <view class="item_bottom">
          <view>
            订单金额
            <span class="item_price_num">¥ {{ item.orderMoney }}</span>
          </view>
        </view>
      </view>
    </view>

    <view v-if="data.list.length<=0" class="empty_icon">
      <image src="https://img.qumoyugo.com/img/default_page_no_order_icon.png"
             style="width: 294rpx;height:330rpx;" mode="aspectFit"/>
    </view>

    <uni-load-more :status="data.status" :icon-size="5" :content-text="data.contentText"
                   v-if="data.list.length > 0"/>

  </view>
</template>
<script setup>
import { getCurrentInstance, ref } from 'vue'
import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const data = ref({
  query: {
    page: 1,
    pageSize: 10,
    orderNo: ''
  },
  list: [],
  total: 0,
  status: 'more',
  contentText: {
    contentdown: '上拉加载更多~',
    contentrefresh: '加载中',
    contentnomore: '我是有底线的~'
  },
  getList: (isLoading = true) => {
    return new Promise((resolve, reject) => {
      $https({
        url: '/app/order/refundOrder',
        type: '',
        method: 'get',
        data: data.value.query
      }).then(res => {
        if (res.code === 0) {
          data.value.list = isLoading ? res.data.items : data.value.list.concat(res.data.items)
          data.value.total = res.data.pagination.total_record
          if (data.value.list.length >= data.value.total) {
            data.value.status = 'no-more'
          }
        }
        resolve()
      }).catch(e => reject(e))
    })
  },
  getRefundStatus: (item) => {
    if (!item.refundStatus) {
      return
    }
    const refundStatusList = ['客服审核中', '客服审核中', '退款中', '已退款', '已驳回', '退款失败']
    return refundStatusList[item.refundStatus]
  },
  search: () => {
    data.value.query.page = 1
    uni.showLoading({ title: '加载中' })
    data.value.getList().then(row => {
      uni.hideLoading()
    }).catch(e => uni.hideLoading())
  },
  getConsingType: (item) => {
    if (!item.consignType) {
      return
    }
    const consingTypeList = ['空运', '陆运', '专车']
    return consingTypeList[item.consignType]
  }
})

onShow(() => {
  data.value.query.page = 1
  data.value.getList()
})

// 下拉刷新
onPullDownRefresh(() => {
  data.value.query.page = 1
  data.value.getList().then(row => {
    uni.stopPullDownRefresh()
  }).catch(e => uni.stopPullDownRefresh())
})

// 上拉加载
onReachBottom(() => {
  if (data.value.total > data.value.list.length) {
    data.value.status = 'loading'
    data.value.query.page += 1
    data.value.getList(false).then(row => {
      data.value.status = 'more'
    })
  } else {
    data.value.status = 'no-more'
  }
})

const click = (url) => {
  uni.navigateTo({
    url
  })
}
</script>
<style scoped lang="scss">
.main {
  min-height: 100vh;
  background-color: #F4F4F4;
  padding: 20rpx 20rpx calc(env(safe-area-inset-bottom));
}

.search {
  display: flex;
  height: 90rpx;
  border-radius: 45rpx;
  background: white;
  align-items: center;
  padding: 30rpx 27rpx;
}

.search_icon {
  width: 36.81rpx;
  height: 38.19rpx;
}

.search-btn {
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  padding: 0;
  margin: 0 0 0 auto;
  background: white;
}

.search-text {
  width: 80%;
  margin-left: 27rpx;
}
.empty_icon{
  text-align: center;
  //margin-top: calc(50% - 244rpx);
  margin-top: 50%;
}
.title_tabs {
  font-size: 28rpx;
  font-weight: 500;
  color: #333333;
}

.item_top {
  padding: 28rpx 28rpx 43rpx 28rpx;
}

.item_bottom {
  padding: 43rpx 28rpx 43rpx 28rpx;
  border-top: 1px solid #D8D8D8;
  display: flex;
  align-items: center;
  font-size: 26rpx;
  font-weight: 500;
  color: #333333;
}
.item_price_num{
  font-size: 35rpx;
  font-weight: 500;
  color: #EE751E;
  margin-left: 20rpx;
}

.item {
  background: #FFFFFF;
  box-shadow: 0rpx 2rpx 3rpx 0rpx #E5E5E5;
  border-radius: 18rpx;
  margin-top: 18rpx;
}

.item:first-child {
  margin-top: 27rpx;
}

.item_title {
  display: flex;
  align-items: center;
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}

.order_status {
  margin-left: auto;
  font-size: 26rpx;
  font-weight: 400;
  color: #EE751E;
}
.item_main{
  margin-top: 45rpx;
  display: flex;
  align-items: center;
}
.main_img{
  width: 170rpx;
  height: 170rpx;
  margin-right: 36rpx;
}
.item_main_title{
  font-size: 29rpx;
  font-weight: 500;
  color: #333333;
  margin-bottom: 39rpx;
}
.item_main_time{
  font-size: 24rpx;
  font-weight: 400;
  color: #9F9F9F;
}
.time_2{
  margin-top: 23rpx;
}
.item_main_no{
  margin-top: 45rpx;
}
.item_main_time>span{
  color: black;
}
.consign_address{
  margin-bottom: 38rpx;
}
.address_txt{
  font-size: 29rpx;
  font-weight: 500;
  color: #525FA2;
  line-height: 14rpx;
}
.arrows2_icon{
  width: 43.06rpx;
  height: 18.06rpx;
  margin: 0 20rpx;
}
</style>
<style scoped>
/deep/ .uni-searchbar__box {
  background: white !important;
}
</style>
